<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增强视频播放器</title>
    <style>
        body { margin: 0; padding: 0; height: 100vh; font-family: Arial, sans-serif; }
        .control-bar { display: flex; justify-content: space-between; padding: 10px; background: #f0f0f0; }
        #mainArea { height: 85vh; border: 2px solid #333; margin: 10px; overflow-y: auto; }
        .video-item { width: 90%; height: 60px; margin: 5px auto; border: 1px solid #ccc; display: flex; 
                     justify-content: space-between; align-items: center; padding: 0 15px; cursor: pointer; transition: background 0.3s; }
        .video-item:hover { background: #f8f8f8; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 1000; }
        .video-container { width: 100%; height: 100%; position: relative; }
        video { width: 100%; height: 100%; object-fit: contain; }
        .controls { position: absolute; bottom: 20px; width: 100%; display: flex; align-items: center; 
                  padding: 0 20px; box-sizing: border-box; gap: 15px; }
        #progressBar { flex-grow: 1; }
        .close-btn { position: absolute; top: 20px; right: 20px; color: white; cursor: pointer; font-size: 24px; }
        .rename-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                       background: white; padding: 20px; border-radius: 8px; z-index: 2000; min-width: 300px; }
        .modal-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
                         background: rgba(0,0,0,0.5); z-index: 1500; }
        .rename-controls { margin-top: 15px; text-align: right; }
        .rename-controls button { margin-left: 10px; padding: 6px 12px; }
        #renameInput { width: 100%; padding: 8px; margin-top: 10px; box-sizing: border-box; }
    </style>
</head>
<body>
    <div class="control-bar">
        <button onclick="stopAudio()">关闭音频</button>
        <input type="file" id="fileInput" hidden accept="video/*,image/*">
        <button onclick="document.getElementById('fileInput').click()">导入文件</button>
    </div>
    
    <div id="mainArea"></div>

    <!-- 视频播放模态 -->
    <div class="modal" id="videoModal">
        <div class="video-container">
            <div class="close-btn" onclick="closeModal()">×</div>
            <video id="mainVideo"></video>
            <div class="controls">
                <button onclick="togglePlay()">播放/暂停</button>
                <input type="range" id="progressBar" min="0" max="100" value="0">
                <button onclick="playAudio()">播放音频</button>
            </div>
        </div>
    </div>

    <!-- 重命名模态 -->
    <div class="modal-backdrop" id="renameBackdrop"></div>
    <div class="rename-modal" id="renameModal">
        <h3>重命名视频</h3>
        <input type="text" id="renameInput" placeholder="输入新名称">
        <div class="rename-controls">
            <button onclick="confirmRename()">确认</button>
            <button onclick="cancelRename()">取消</button>
        </div>
    </div>

    <script>
        let currentAudio = null;
        let currentRenameIndex = -1;
        let db = null;
        const videos = [];

        // 初始化数据库
        const initDB = () => {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open('VideoPlayerDB', 2);

                request.onupgradeneeded = (event) => {
                    db = event.target.result;
                    if (!db.objectStoreNames.contains('videos')) {
                        const store = db.createObjectStore('videos', { keyPath: 'id' });
                        store.createIndex('name', 'name', { unique: false });
                    }
                };

                request.onsuccess = (event) => {
                    db = event.target.result;
                    loadVideos().then(resolve).catch(reject);
                };

                request.onerror = (event) => {
                    reject('数据库初始化失败');
                };
            });
        };

        // 加载存储的视频
        const loadVideos = async () => {
            return new Promise((resolve, reject) => {
                const transaction = db.transaction(['videos'], 'readonly');
                const store = transaction.objectStore('videos');
                const request = store.getAll();

                request.onsuccess = (event) => {
                    const results = event.target.result;
                    results.forEach((item) => {
                        const blob = new Blob([item.data], { type: item.type });
                        const url = URL.createObjectURL(blob);
                        videos.push({
                            id: item.id,
                            url,
                            name: item.name,
                            element: null
                        });
                        createVideoItem(videos.length - 1);
                    });
                    resolve();
                };

                request.onerror = () => reject('加载视频失败');
            });
        };

        // 保存视频到数据库
        const saveVideo = async (file) => {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = async (event) => {
                    const transaction = db.transaction(['videos'], 'readwrite');
                    const store = transaction.objectStore('videos');
                    const id = Date.now();
                    
                    const request = store.add({
                        id,
                        name: '未命名视频',
                        data: event.target.result,
                        type: file.type
                    });

                    request.onsuccess = () => {
                        resolve(id);
                    };

                    request.onerror = () => {
                        reject('保存失败');
                    };
                };
                reader.readAsArrayBuffer(file);
            });
        };

        // 文件导入处理
        document.getElementById('fileInput').addEventListener('change', async function(e) {
            const file = e.target.files[0];
            if (file) {
                try {
                    const id = await saveVideo(file);
                    const blob = new Blob([file], { type: file.type });
                    const url = URL.createObjectURL(blob);
                    videos.push({
                        id,
                        url,
                        name: '未命名视频',
                        element: null
                    });
                    createVideoItem(videos.length - 1);
                    alert('导入成功');
                } catch (error) {
                    alert('导入失败: ' + error);
                }
            }
        });

        // 创建视频条目
        function createVideoItem(index) {
            const container = document.createElement('div');
            container.className = 'video-item';
            container.innerHTML = `
                <span></span>
                <div>
                    <button class="rename-btn" data-index="">修改</button>
                    <button class="delete-btn" data-index="">删除</button>
                </div>
            `;
            container.onclick = (e) => {
                if (!e.target.closest('button')) {
                    showVideo(index);
                }
            };
            document.getElementById('mainArea').appendChild(container);
            videos[index].element = container;
        }

        // 显示视频播放器
        function showVideo(index) {
            const modal = document.getElementById('videoModal');
            const video = document.getElementById('mainVideo');
            video.src = videos[index].url;
            modal.style.display = 'block';
            video.play();

            video.ontimeupdate = () => {
                document.getElementById('progressBar').value = 
                    (video.currentTime / video.duration) * 100;
            };

            document.getElementById('progressBar').oninput = (e) => {
                video.currentTime = (e.target.value / 100) * video.duration;
            };
        }

        // 播放控制
        function togglePlay() {
            const video = document.getElementById('mainVideo');
            video.paused ? video.play() : video.pause();
        }

        function closeModal() {
            document.getElementById('videoModal').style.display = 'none';
            document.getElementById('mainVideo').pause();
        }

        // 音频处理
        function playAudio() {
            const video = document.getElementById('mainVideo');
            if (currentAudio) currentAudio.pause();
            currentAudio = new Audio(video.src);
            currentAudio.play();
            closeModal();
        }

        function stopAudio() {
            if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
            } else {
                alert('未播放');
            }
        }

        // 重命名处理
        function showRenameModal(index) {
            currentRenameIndex = index;
            document.getElementById('renameBackdrop').style.display = 'block';
            document.getElementById('renameModal').style.display = 'block';
            document.getElementById('renameInput').value = videos[index].name;
            document.getElementById('renameInput').focus();
        }

        function confirmRename() {
            if (currentRenameIndex === -1) return;
            const newName = document.getElementById('renameInput').value.trim();
            if (newName) {
                const video = videos[currentRenameIndex];
                video.name = newName;
                video.element.querySelector('span').textContent = newName;
                
                // 更新数据库
                const transaction = db.transaction(['videos'], 'readwrite');
                const store = transaction.objectStore('videos');
                store.get(video.id).onsuccess = (event) => {
                    const data = event.target.result;
                    data.name = newName;
                    store.put(data);
                };
            }
            closeRenameModal();
        }

        function cancelRename() {
            closeRenameModal();
        }

        function closeRenameModal() {
            document.getElementById('renameBackdrop').style.display = 'none';
            document.getElementById('renameModal').style.display = 'none';
            currentRenameIndex = -1;
        }

        // 删除处理
        function deleteVideo(index) {
            if (index < 0 || index >= videos.length) return;
            const video = videos[index];
            
            // 删除数据库记录
            const transaction = db.transaction(['videos'], 'readwrite');
            const store = transaction.objectStore('videos');
            store.delete(video.id);

            // 更新界面
            URL.revokeObjectURL(video.url);
            video.element.remove();
            videos.splice(index, 1);
            
            // 重新索引
            videos.forEach((v, i) => {
                v.element.querySelectorAll('button').forEach(btn => {
                    btn.dataset.index = i;
                });
            });
        }

        // 事件委托
        document.getElementById('mainArea').addEventListener('click', function(e) {
            const deleteBtn = e.target.closest('.delete-btn');
            const renameBtn = e.target.closest('.rename-btn');
            
            if (deleteBtn) {
                const index = parseInt(deleteBtn.dataset.index);
                deleteVideo(index);
            }
            
            if (renameBtn) {
                const index = parseInt(renameBtn.dataset.index);
                showRenameModal(index);
            }
        });

        // 初始化
        initDB().catch(error => console.error(error));

        // 输入框回车支持
        document.getElementById('renameInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') confirmRename();
        });
    </script>
</body>
</html>